<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="sim-history-info.html">




<dom-module id="sim-history-grid">
    <template>
        <style>
            :host {
                display: block;
            }

            .grid-history {
                background: transparent;
                max-width: 100%;
            }

            .grid-history:after {
                content: '';
                display: block;
                clear: both;
            }

            .grid-sizer-history,
            .grid-item-history
            {
                width: auto;
                height:auto;
            }

            .grid-item-history {
                width:350px;
                float: left;
                background-color: #B8C4CC;
                border-color: hsla(0, 0%, 0%, 0.5);
                border: 2px solid black;
                border-radius: 5px;
                font-size: large;
                padding:10px;
                position:relative;
                margin: 1%;
            }

            .grid-item-history:hover{
                background-color:  #fff;
                color:black;
                border:2px solid;
                border-color: black;
            }

            .grid-item-history-selected{
                background-color:  #fff;
                color:black;
                border:2px solid ;
                border-color:black;
            }

        </style>

        <div class="grid-history">
            <div class="grid-sizer-history"></div>
            <template is="dom-repeat" id="l_sim_history" items="{{listSimHistory}}" as="sim">
                <div class="grid-item-history layout vertical" id="{{sim.simID}}">
                    <sim-history-info sim="{{sim}}" on-click="select"></sim-history-info>
                </div>
            </template>
        </div>
    </template>
</dom-module>
e
<script>
    Polymer({
        is: 'sim-history-grid',

        properties: {
            listSimHistory:{
                type:Array
            }
        },


        attached: function(){
            this.async(function(){
                $('.grid-history').masonry({
                            itemSelector: '.grid-item-history',
                            columnWidth: '.grid-sizer-history',
                            percentPosition: true
                        }
                );
            });
        },
        select: function (event) {

            var target=event.target;

            if($(target).prop("id").toLowerCase() == "download_log_history_form"){
                return;
            }
            if(event.target.tagName.toLowerCase() == "sim-history-info")
                event.target.className+=" .grid-item-history-selected";
            else{

               while($(target).prop("tagName").toLowerCase()!="sim-history-info"){

                    target=$(target).parent();
                   if($(target).prop("id").toLowerCase() == "download_log_history_form"){
                       return;
                   }
                }
                target=$(target).parent();
                if($(target).hasClass("grid-item-history-selected"))
                    $(target).removeClass("grid-item-history-selected");
                else
                    $(target).addClass("grid-item-history-selected");
            }

        }


    });


</script>